<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%
	Long resid = Long.parseLong(request.getParameter("id"));
 %>
<html>
  <head>
    <title>HTTP连通性综合性能展现</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="pragma" content="no-cache"/>
	<meta http-equiv="cache-control" content="no-cache"/>
	<meta http-equiv="expires" content="0"/>
	<%@ include file="../include/common.jsp"%>
	<style type="text/css">
	body{text-align: left;}
	.basicInfo{width:99%;clear: both;}
    span{height:24px;line-height: 24px;}
    
    .col-main-basic{height:24px;border:1px solid #afcbdf;}
    
	.col-main-span-l{width:6%;min-width:20px;background: #dfe8f9;height:24px;line-height: 24px;float:left;white-space:nowrap;}
	.col-main-span-r{width:26.42%;min-width:30px;text-align: left;padding-left:10px;float:left;border-left:0px;white-space:nowrap;}
	.none-border-right{border-right: 0px;}
	
	.basicInfo .col-graphs-info{clear:both;border-left:1px solid #afcbdf;border-right:1px solid #afcbdf;height:24px;line-height: 24px;background: #dfe8f9;text-align: left;}
	.basicInfo .col-graphs{height:300px;margin-bottom: 10px;}

	.column .responseTimeCountCommon{width:32%;float:left;margin:10px 0px 10px 10px;min-width: 32%;}
	.column .responseTimeCountCommon .countTitle{padding:5px 0 5px 0;}
	.column .responseTimeCountCommon .countInfo span{width:25%;min-width:20px;float:left;white-space:nowrap;}
	.column .responseTimeCountCommon .numberInfo span{width:16.3%;display: block;float: left;}
	.column .responseTimeCountCommon .CountDiv{clear:both;height:260px;margin-top:5px;width:auto;}
	
	.countInfo,.numberInfo{border:1px solid #afcbdf;height:24px;margin:5px auto;}
	
	.statuCountDiv .statuCommon,.statuIdentity{margin:10px 0px 10px 10px;}
	.statuCountDiv .statuCommon{height:200px;float:left;width:32%;border:1px solid #afcbdf;}
	.statuCountDiv .statuIdentity ul li{height:20px;line-height: 20px;vertical-align: middle;width:5%;float:left;}
	</style>
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/default/bsm/sub_menu.css" />
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/default/bsm/perf/listPage.css" />
	<script type="text/javascript" src="${pageContext.request.contextPath}/resources/charts/FusionCharts.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/resources/charts/FusionCharts.jqueryplugin.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
				
				initBasicInfo();
				responseGraphs(0,1);
				boxToHour(0,1,'todayBox');
				boxToHour(1,1,'Box24');
				boxToHour(3,2,'Box1Month');
				pieDay(0);
				pieDay(1);
				pieDay(30);
				setInterval('initBasicInfo()',60000);
				//给时间变化单选按钮绑定单机事件
				$("input:radio[name='timeScope']").live('click',timeScopeClick);
		});
		
		
		//初始化基本信息
		function initBasicInfo(){
			$.ajax({
				url : 'real-time!getBaseInfo.action', 
				type : 'POST',
				dataType : "json",
				data : {
					resId :<%=resid %>,
					propIds:'attr_120503030000003,prop_120503030000002,prop_120503030000001'
				},
				success : function(data) {
					$('#attr_120503030000003').text(data.attr_120503030000003);
					var prop_120503030000002 = data.prop_120503030000002;
					if(prop_120503030000002!=1){
						$('#prop_120503030000002 image').attr('src','${pageContext.request.contextPath}/style/default/bsm/images/error.png').attr('title','失败');
					}
					$('#prop_120503030000001').text(data.prop_120503030000001);
				}
			});
		}
		
		//耗时曲线图
		function responseGraphs(timeSection,dimen){
		
			var beginDate ='';
			var endDate='';
			
			if(timeSection==1){
				timeSection =9; //最近24小时
			}else if(timeSection==2){
				timeSection=7; //最近7天
			}else if(timeSection==3){
				timeSection=8; //最近一个月
			}
		
			  $.ajax({
				url : 'real-time!getPropValues.action', // 
				type : 'POST',
				dataType : "json",
				data : {
					resId :'<%=resid %>',
					dimen:dimen, //显示时汇聚数据 2:日汇聚
					trendtype:0, //均值趋势
					timeSection:timeSection, 
					beginDate:beginDate, //prop-trend.jsp 的性能图数据复用而使用此参数
					endDate:endDate, //同上
					propIds:'120503030000001',
					iDisplayStart:1,
					iDisplayLength:300
				},
				success : function(data) {
					 createChart(data,timeSection,dimen);
				}
			});
		}
		
		var responseLine;
		function createChart(data,timeSection,dimen){
			if(FusionCharts("responseLine1"))FusionCharts("responseLine1").dispose();
		
			var val="";
			var category="";
			
			var type = 2;
			if(parseInt(timeSection)==0){
				type=4;
			}
			for(var i=0;i<data.length;i++){
				var ob = data[i];
				var value = ob.values[0];
				var time = timeFormart(ob.time,type);
				if(dimen==2){
					//01-20 00:00
					time=time.match("(\\d{2}\\-\\d{2})\\s\\S")[1];
				}
				
				category+=" <category label='"+time+"' ></category>";
				val+=" <set value='"+(value/1000).toFixed(2)+"' />";
			};
			
			var str="<?xml version='1.0' encoding='GBK'?>";
			str+="<chart  showNames='0'  yAxisMinValue='0' numbersuffix='S'  showLimits='1' showLegend='0' canvasBorderThickness='2'";
			str+=" showDivLineValue='1' showTickMarks='1'  lineThickness='1' showValues='0'  showLabels ='1' ";
			str+=" formatNumberScale='0' anchorRadius='4'  anchorBorderThickness='2'   divLineAlpha='20' divLineColor='FFFFFF'"; 
			str+=" divLineIsDashed='0' showAlternateHGridColor='1' showAlternateVGridColor='1' alternateHGridAlpha='10' alternateHGridColor='567DA2'";
			str+=" shadowAlpha='40' labelStep='1'   numDivLines='5' chartTopMargin='10'  chartLeftMargin='15' chartBottomMargin='5'";
			str+=" chartLeftMargin='5' chartRightMargin='5'   labelDisplay='Rotate' slantLabels='1'  ";
			str+=" bgColor='FFFFFF,FFFFFF' canvasBgColor='567DA2' canvasBgAlpha='10,10' canvasBorderColor='FFFFFF' >";
			str+="<categories>";
			str+=category;
			str+="</categories>";
			str+="<dataset seriesName='连接耗时'  color='2AD62A' anchorBorderColor='FFFFFF' anchorBgColor='2AD62A'>";
			str+=val;
			str+="</dataset>";
			str+="</chart>";
		    responseLine =  new FusionCharts("${pageContext.request.contextPath}/resources/charts/MSLine.swf?ChartNoDataText=没有数据", "responseLine1",'100%', $('.col-graphs').height(), "0", "1" );
			responseLine.setDataXML(str);
			responseLine.render("responseGraphsDiv");
		}
		
		
		function timeScopeClick(event){
			var dimen = 1;
			if(event.target.value==3)
				dimen=2;
				
			responseGraphs(event.target.value,dimen);
		}
		
		//稳定性统计 时汇聚数据
		function boxToHour(timeSection,dimen,divId){
			 var beginDate='';
			 var currentDate=new Date();
			 var endDate=currentDate;
			 if(timeSection==1){
			 	var tempDate = new Date(currentDate.getTime() - 1000 * 60 * 60 * 24);
				 beginDate = timeFormart(tempDate.getTime(),1);
			 }else if(timeSection==2){
			 	var tempDate = new Date(currentDate.getTime() - 1000 * 60 * 60 * 24*7);
				 beginDate = timeFormart(tempDate.getTime(),1);
			 }else if(timeSection==3){
			 	var tempDate = new Date(currentDate.getTime() - 1000 * 60 * 60 * 24*30);
				 beginDate = timeFormart(tempDate.getTime(),1);
			 }
			 
			 if(timeSection!=0){
			 	timeSection=4;
			 }
			 
			 $.ajax({
				url : 'prop-query!queryProp.action', // 
				type : 'POST',
				dataType : "json",
				data : {
					resId :'<%=resid %>',
					dimen:0, //0:原始数据 1显示时汇聚数据 2:日汇聚
					trendtype:0, //均值趋势
					timeSection:timeSection, // 0:今天 1:近24小时 2:近7天内 3:近一个月内
					beginDate:beginDate, //prop-query.jsp 的性能图数据复用而使用此参数
					endDate:endDate, //同上
					propIds:'120503030000001',
					iDisplayStart:1,
					iDisplayLength:1000000
				},
				success : function(data) {
					 createBoxChart(data.aaData,divId);
					
				},
				error:function(req,statu,error){
					alert(error);
				}
			});
			
		}
		
		function createBoxChart(data,divId){
		
			var val="<dataset  >";
			var label =new Array();
			
			var indexVal=0; //指数
			var indexLevel=''; //指数级别
			var sum = 0;
			var avgValue = 0;
			var maxValue=0;
			var minValue=1000;
			
			var arrayVal = new Array();
			
			$.each(data,function(index,ob){
			    // 01/09 10:06:48
			    var time = ob.time;
			    //获取时
			    var t =null;
			    if(divId.indexOf("Month")!=-1){ //按天显示
			    	t=time.match("(\\d{2}\\/\\d{2})\\s\\S*")[1];
			    }else{ //按小时显示
			    	t=time.match("(\\d{2}\\/\\d{2}\\s\\d{2})\\S*")[1];
			    }
			    //记录当前t所在位置
			    var indexTemp=null;
			    $.each(label,function(index,ob){
			    	if(ob==t){
			    		indexTemp=index;
			    		return false;
			    	}
			    });
			    
			    if(indexTemp==null){
			    	label.push(t);
			    	indexTemp=label.length-1;
			    	arrayVal[indexTemp]={"time":""+t+"","val":""};
			    }
			    
				
				//将数据按小时或者按天分组组装
				$.each(ob,function(key,v){
					if(key!='time'){
						if(parseInt(v)>maxValue){
							maxValue=v;
						}
						sum=sum+parseInt(v);
						if(parseInt(v)<minValue){
							minValue=parseInt(v);
						}
					    arrayVal[indexTemp].val=arrayVal[indexTemp].val+(arrayVal[indexTemp].val.length>0?',':'')+(v);
					}
				});
			});
			avgValue= (sum/data.length).toFixed(2);
			var tempSum = 0;
			$.each(arrayVal,function(index,ob){
			
				//计算指数
				var valStr =ob.val.split(",");
				
				//单组最大值、最小值、平均值计算
				var max=0;
				var min=valStr[0];
				var avg=0;
				var sumCount=0;
				$.each(valStr,function(i,v){
					var countVal = (parseInt(v)-avgValue)*(parseInt(v)-avgValue);
					tempSum+=countVal;
					
					if(parseInt(v)>max){
						max = v;
					}
					if(parseInt(max)<min){
						min= v;
					}
					sumCount+=parseInt(v);
				});
				avg=sumCount/valStr.length;
				
				var toolText ="最大:"+(max/1000).toFixed(2)+"S\n平均:"+(avg/1000).toFixed(2)+"S\n最小:"+(min/1000).toFixed(2)+"S";
				val+="<set value='"+(max/1000).toFixed(2)+","+(avg/1000).toFixed(2)+","+(min/1000).toFixed(2)+"' tooltext='"+toolText+"' />";
			});
			val+="</dataset  >";
			var str=""; 
			str+="<chart plotspacepercent='"+(label.length>4?5:70)+"'  rotateLabels='1' slantLabels='1'  numbersuffix='S' showMedianValues='0' showValues='0' useRoundEdges='1'  bgColor='99CCFF,FFFFFF' formatNumberScale='0'  > ";
			str+="<categories>  ";
			$.each(label,function(index,ob){
				if(divId.indexOf("Month")==-1){
					ob=ob.match("\\d{2}\\/\\d{2}\\s(\\d{2})")[1];
				}
				str+=" <category label='"+ob+"' />";
			})
			str+=" </categories>  ";
			str+=val;
			str+="</chart>";
			var todayBox = new FusionCharts("${pageContext.request.contextPath}/resources/charts/BoxAndWhisker2D.swf?ChartNoDataText=没有数据", "Box"+divId, '100%', $('.CountDiv').height(), "0","1");
            todayBox.setDataXML(str);
            todayBox.render(divId); 
            
            indexVal = Math.sqrt(tempSum/data.length);
            indexVal = (indexVal/1000).toFixed(2);
            
            if(indexVal<=0.5){
            	indexLevel="非常稳定";
            }else if(indexVal>0.5&&indexVal<=1){
            	indexLevel="比较稳定";
            }else if(indexVal>1){
            	indexLevel="不稳定";
            }
			
            $('#'+divId+'Max').text((maxValue/1000).toFixed(2)+"S"); 
            $('#'+divId+'Avg').text((avgValue/1000).toFixed(2)+"S");
            $('#'+divId+'Min').text((minValue/1000).toFixed(2)+"S");
            $('#'+divId+'Index').text(indexVal);
            $('#'+divId+'Level').text(indexLevel);
		}
		
		function pieDay(type){
			//为了和健康度查询数据共享 特加入以下参数
		  	 var beginDate ;
			 var endDate;
			 var currentDate = new Date();
			 if(type==0){
			 	beginDate = currentDate.getFullYear()+"-"+add_zero(currentDate.getMonth()+1)+"-"+add_zero(currentDate.getDate())+" "+"00:00:00";
			 	endDate = currentDate.getFullYear()+"-"+add_zero(currentDate.getMonth()+1)+"-"+add_zero(currentDate.getDate())+" "+add_zero(currentDate.getHours())+":"+add_zero(currentDate.getMinutes())+":00"
			 }
			 
			 $.ajax({
				url : '${pageContext.request.contextPath}/resource/res-healthy!findResHealthData.action', 
				type : 'POST',
				dataType : "json",
				data : {
					id :'<%=resid %>',
					choose:type, //1：近24小时 7：近7天内 30：近一个月内 0：今天
					dimension:1, //1：时汇聚 2：日汇聚
					dateScope:beginDate+"|"+endDate
				},
				success : function(data) {
					 pieChartInit(data,type);
				}
			});
			
		}
		
		function pieChartInit(data,type){
			 var title="";
			 var divId ="";
			 if(type==0){
			 	title="今天";
			 	divId="countTodayPie";
			 }else if(type==1){
			 	title="近24小时";
			 	divId="count24Pie";
			 }else if(type==7){
			 	title="近7天内";
			 	divId="count7Pie";
			 }else{
			 	title="近一个月内";
			 	divId="count1MonthPie";
			 }
			  			
			 var normal =0;
			 var minor = 0;
			 var warn  =0 ;
			 var major =0;
			 var critical=0;
			 var sum=0;
			 var val="";
			 
			 $.each(data,function(index,ob){
			 	var value = parseInt(ob.degree);
			 	sum=sum+value;
			 	if(value>=0&&value<=20){
			 		critical+=value;
			 	}else if(value>20&&value<=40){
			 		major+=value;
			 	}else if(value>40&&value<=60){
			 		warn+=value;
			 	}else if(value>60&&value<=80){
			 		minor+=value;
			 	}else{
			 		normal+=value;
			 	}
			 });
			 
			 var label =["正常","轻微","警告","重要","严重"];
			 var value =[normal,minor,warn,major,critical];
			 var colorArray =["94E75F","67B9E1","F0E267","F57100","DF0202"];
			 for(var i=0;i<5;i++){
			 	var v=value[i]/sum;
			 	val+="<set label='"+label[i]+"' value='"+(v.toFixed(4)*100)+"' isSliced='"+(i==3||i==label.length-1?1:0)+"' color='"+colorArray[i]+"' />";
			 }
			var str="";
			str+=" <chart caption='"+title+"' decimals='2'  enableSmartLabels='1' formatNumberScale='0' enableRotation='0' bgColor='99CCFF,FFFFFF' animation='1'   numbersuffix='%' pieSliceDepth='30' startingAngle='125' ";
			str+="    bgAlpha='65' >";
			str+=val;
			str+=" </chart>";
			var countTodayPie = new FusionCharts("${pageContext.request.contextPath}/resources/charts/Pie3D.swf?ChartNoDataText=没有数据",""+divId+"1", '100%', $('.statuCommon').height(), "0", "1"); 
			countTodayPie.setDataXML(str);		   
		    countTodayPie.render(divId);
		}
		
		
	</script>
	  
  </head>
  <body>

	<div class="basicInfo">
		<div class="col-main-basic" >
			<span class="col-main-span-l " >访问网址:</span><span class="col-main-span-r" id="attr_120503030000003"></span>
			<span class="col-main-span-l ">当前状态:</span><span class="col-main-span-r " id="prop_120503030000002">
				<img src="${pageContext.request.contextPath}/style/default/bsm/images/ok.png" alt="正常" title="正常" />
			</span>
			<span class="col-main-span-l">访问延时:</span><span class="col-main-span-r none-border-right" style="width:20%;" id="prop_120503030000001" ></span>  
		</div>
		<div class="col-graphs-info" >
			访问延时变化曲线图
			<label><input type="radio" checked="checked" name="timeScope" value="0" />今天</label>
			<label><input type="radio" name="timeScope" value="1" />近24小时</label>
			<label><input type="radio" name="timeScope" value="3" />近1个月内</label>
		</div>
		<div class="col-graphs" >
			<div id="responseGraphsDiv"></div>
		</div>
	</div>
	
	<div class="column b-1">
		<h2 class="title-h2 m-0" >访问稳定性统计</h2>
		<div class="responseTimeCountCommon">
			<ul>
				<li><h2 class="countTitle">今天</h2></li>
				<li>
					<div class="countInfo" >
						<span class="col-main-span-l" >稳定级别</span>
						<span  ><label id="todayBoxLevel"></label></span>  
						<span class="col-main-span-l" >稳定指数</span>
						<span  ><label id="todayBoxIndex"></label></span>
					</div>
				</li>
				<li>
					<div class="CountDiv">
						<div id="todayBox"></div>
					</div>
				</li>
				<li>
				    <div class="numberInfo">
				    	<span class="col-main-span-l ">最大</span>
				    	<span class="none-border-right"><label id="todayBoxMax"></label></span>
				    	<span class="col-main-span-l">平均</span>
				    	<span class="none-border-right"><label id="todayBoxAvg"></label></span>
				    	<span class="col-main-span-l">最小</span>
				    	<span><label id="todayBoxMin"></label></span>
				    </div>
				</li>
			</ul>
		</div>
		<div class="responseTimeCountCommon">
			<ul>
				<li><h2 class="countTitle" >近24小时</h2></li>
				<li>
					<div class="countInfo" >
						<span class="col-main-span-l" >稳定级别</span>
						<span  ><label id="Box24Level"></label></span>
						<span class="col-main-span-l" >稳定指数</span>
						<span><label id="Box24Index"></label></span>
					</div>
				</li>
				<li>
					<div class="CountDiv">
						<div id="Box24"></div>
					</div>
				</li>
				<li>
				    <div class="numberInfo">
				    	<span class="col-main-span-l ">最大</span>
				    	<span class="none-border-right"><label id="Box24Max"></label></span>
				    	<span class="col-main-span-l">平均</span>
				    	<span class="none-border-right"><label id="Box24Avg"></label></span>
				    	<span class="col-main-span-l">最小</span>
				    	<span><label id="Box24Min"></label></span>
				    </div>
				</li>
			</ul>
		</div>
		<div class="responseTimeCountCommon">
			<ul>
				<li><h2 class="countTitle"  >近1个月内</h2></li>
				<li>
					<div class="countInfo">
						<span class="col-main-span-l" >稳定级别</span>
						<span  ><label id="Box1MonthLevel"></label></span>
						<span class="col-main-span-l ">稳定指数</span>
						<span ><label id="Box1MonthIndex"></label></span>
					</div>
				</li>
				<li>
					<div class="CountDiv">
						<div id="Box1Month"></div>
					</div>
				</li>
				<li>
				    <div class="numberInfo">
				    	<span class="col-main-span-l ">最大</span>
				    	<span class="none-border-right"><label id="Box1MonthMax"></label></span>
				    	<span class="col-main-span-l">平均</span>
				    	<span class="none-border-right"><label id="Box1MonthAvg"></label></span>
				    	<span class="col-main-span-l">最小</span>
				    	<span><label id="Box1MonthMin"></label></span>
				    </div>
				</li>
			</ul>
		</div>
	</div>
	
	<div class="column b-1 statuCountDiv">
		<h2 class="title-h2 m-0" >访问无故障统计</h2>
		<div  class="statuCommon" >
			<div id="countTodayPie" ></div>
		</div>
		<div  class="statuCommon">
			<div id="count24Pie" ></div>
		</div>
		<!-- <div  class="statuCommon">
			<div id="count7Pie" ></div>
		</div> -->
		<div  class="statuCommon">
			<div id="count1MonthPie" ></div>
		</div>
		<div class="statuIdentity">
			<ul>
				<li><label style="color:#94E75F;">■</label>正常</li>
				<li><label style="color:#67B9E1;">■</label>轻微</li>
				<li><label style="color:#F0E267;">■</label>警告</li>
				<li><label style="color:#F57100;">■</label>重要</li>
				<li><label style="color:#DF0202;">■</label>严重</li>
			</ul>
		</div>
		<div style="clear:both;"></div>
	</div>
	
  </body>
</html>
